<template>
  <el-dialog title="商品分佣设置" width="30%" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="rule" ref="dataForm" label-width="155px">
      <el-form-item label="是否开启分佣">
        <el-radio v-model="dataForm.open" :label="true">开启</el-radio>
        <el-radio v-model="dataForm.open" :label="false">关闭</el-radio>
      </el-form-item>
      <div v-if="dataForm.open">
        <el-form-item label="是否默认启用店铺设置">
          <el-radio v-model="dataForm.default_shop" @change="defaultSet" :label="true">是</el-radio>
          <el-radio v-model="dataForm.default_shop" @change="defaultSet" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="计算模式">
          <el-radio v-model="dataForm.compute_mode" :label="0">固定价格</el-radio>
          <el-radio v-model="dataForm.compute_mode" :label="1">固定比例</el-radio>
        </el-form-item>
        <div v-if="dataForm.compute_mode === 0">
          <el-form-item label="一级固定价格" prop="first_level_price">
            <el-input maxlength="10" type="number" @input="limitInput($event, 'first_level_price')" v-model="dataForm.first_level_price" :disabled="dataForm.default_shop" placeholder="请输入一级固定价格"></el-input>
          </el-form-item>
          <el-form-item label="二级固定价格" prop="second_level_price">
            <el-input maxlength="10" type="number" @input="limitInput($event, 'second_level_price')" v-model="dataForm.second_level_price" :disabled="dataForm.default_shop" placeholder="请输入二级固定价格"></el-input>
          </el-form-item>
        </div>
        <div v-if="dataForm.compute_mode === 1">
          <el-form-item label="一级固定比例" prop="first_level_ratio">
            <el-input maxlength="10" type="number" v-model="dataForm.first_level_ratio" @input="limitInput($event, 'first_level_ratio')" :disabled="dataForm.default_shop" placeholder="请输入一级固定比例">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="二级固定比例" prop="second_level_ratio">
            <el-input maxlength="10" type="number" v-model="dataForm.second_level_ratio" @input="limitInput($event, 'second_level_ratio')" :disabled="dataForm.default_shop" placeholder="请输入二级固定比例">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit('dataForm')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import goodsService from '@/api/goodsService.js'
import serviceApione from '@/api/serviceApione.js'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (!/([1-9][0-9]*(\.\d+)?)|(0\.\d+)$/.test(value)) {
        callback(new Error('请输入大于0的数字'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      dataForm: {
        open: '',
        default_shop: false,
        compute_mode: 0,
        first_level_price: '',
        second_level_price: '',
        first_level_ratio: '',
        second_level_ratio: ''
      },
      rule: {
        first_level_price: [
          {
            required: true,
            message: '请输入一级固定价格',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        second_level_price: [
          {
            required: true,
            message: '请输入二级固定价格',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],

        first_level_ratio: [
          {
            required: true,
            message: '请输入一级固定比例',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        second_level_ratio: [
          {
            required: true,
            message: '请输入二级固定比例',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ]
      },
      default: {},
      custom: {}
    }
  },
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  created () {
    this.getDefault()
  },
  methods: {
    limitInput (value, name) {
      this.dataForm[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    init (id) {
      this.dataForm = {
        open: '',
        default_shop: false,
        compute_mode: 0,
        first_level_price: '',
        second_level_price: '',
        first_level_ratio: '',
        second_level_ratio: ''
      }
      this.dataForm.goods_id = id || null
      this.visible = true
      this.searchDetail(id)
    },
    async searchDetail (id) {
      let res =
        this.type == 1
          ? await goodsService.shopGetDistribute(id)
          : await goodsService.servicegoodsconfig(id)

      if (res.data && res.data.code == 200) {
        if (res.data.data) {
          this.dataForm = res.data.data
          this.custom = JSON.parse(JSON.stringify(res.data.data))
          // console.log('设置过')
        } else {
          // console.log('没设置过')
          // console.log(this.dataForm.open)
        }
      }
    },

    defaultSet (e) {
      if (e) {
        this.dataForm = Object.assign(this.dataForm, this.default)
      } else {
        // this.dataForm = Object.assign(this.dataForm, this.custom);
      }
      // this.dataForm.default_shop = e;
    },
    /**
     * 获取默认值
     * */
    getDefault () {
      serviceApione.getGoodsSalesConfig().then((res) => {
        if (res.data && res.data.code == 200) {
          this.default = res.data.data
        }
      })
    },

    dataFormSubmit (e) {
      this.$refs[e].validate(async (valid) => {
        if (valid) {
          this.dataForm.first_level_price = this.dataForm.first_level_price || 0
          this.dataForm.second_level_price = this.dataForm.second_level_price || 0
          this.dataForm.first_level_ratio = this.dataForm.first_level_ratio || 0
          this.dataForm.second_level_ratio = this.dataForm.second_level_ratio || 0

          let res =
            this.type == 1
              ? await goodsService.shopSetDistribute(this.dataForm)
              : await goodsService.servicegoodsconfigSet(this.dataForm)

          if (res.data && res.data.code == 200) {
            this.$message.success('设置成功！')
            this.visible = false
            this.$emit('result', res.data.data)
          }
        } else {
          console.log('error submit!!')
          this.visible = false
          return false
        }
      })
    },
    cancel () {
      this.visible = false
      this.$emit('result', false)
    }
  }
}
</script>

<style lang="scss">
.el-flex {
  display: flex;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}
</style>
